import {
  ProFormDigit,
  ProFormCheckbox,
  ProFormDependency,
  ProFormItem,
} from '@ant-design/pro-form';
import WrapperForm from '../../wrapperForm';
import { values } from 'lodash';
import ColorPicker from '@/components/ColorPicker';

import { rules, DISPLAY_SET } from '..';

import type { SearchValue } from '..';
import type { Rule } from 'antd/lib/form';

interface ISearchFormProps {
  data: SearchValue;
}

const SearchForm: React.FunctionComponent<ISearchFormProps> = (props) => (
  // @ts-ignore
  <WrapperForm<SearchValue> reducerName="updateData" {...props}>
    <ProFormCheckbox.Group name="displaySetting" label="显示设置" options={values(DISPLAY_SET)} />
    <ProFormDependency name={['displaySetting']}>
      {({ displaySetting }) => (
        <div>
          {displaySetting.includes(DISPLAY_SET.line.value) && (
            <ProFormItem label="描边颜色" name="borderColor" required>
              <ColorPicker />
            </ProFormItem>
          )}
          {displaySetting.includes(DISPLAY_SET.button.value) && (
            <ProFormItem label="按钮颜色" name="btnColor" required>
              <ColorPicker />
            </ProFormItem>
          )}
        </div>
      )}
    </ProFormDependency>
    <ProFormDigit
      width={100}
      min={0}
      label="圆角"
      name="borderRadius"
      placeholder="请输入圆角"
      required
      rules={rules.borderRadius as Rule[]}
    />
    <ProFormItem label="背景颜色" name="bgColor" required>
      <ColorPicker />
    </ProFormItem>
  </WrapperForm>
);

export default SearchForm;
